<template>
    <div class="banner">
        <div @click="showswiper">
            <div class="banner-img">
                <img src="https://p0.ssl.qhimgs3.com/dmfd/200_132_/t01513748a0a0514a1d.jpg" alt="">
            </div>
            <div class="banner-title">
                 金海湖风景区(AAAA景区)
            </div>
        </div>

        <div class="img-swiper"
        v-show="imgSwiper"
        @click="hideSwiper">
            <swiper :options="swiperOption" ref="mySwiper">
                    <swiper-slide v-for="item in bannerlist" :key="item.id">
                        <img :src="item.imgUrl" alt="">
                    </swiper-slide>
                    
            </swiper>
            <div class="swiper-pagination" slot="pagination"></div>

        </div>

    </div>
</template>

<script>
export default {
    data(){
        return{
            imgSwiper:false,
            
            swiperOption:{
                loop: true,
                pagination: {
                el: ".swiper-pagination",
                type:"fraction",
                clickable: true //允许分页点击跳转
                },
                navigation: {
                 nextEl: ".swiper-button-next",
                 prevEl: ".swiper-button-prev"
                }
            },
            bannerlist:[{
                id:"01",
                imgUrl:"https://p0.ssl.qhimgs3.com/dmfd/200_132_/t01513748a0a0514a1d.jpg"
            },{
                id:'02',
                imgUrl:"http://p1-q.mafengwo.net/s10/M00/32/01/wKgBZ1lUk26AD8vsAApaXx3iZI458.jpeg?imageMogr2%2Fthumbnail%2F%21690x370r%2Fgravity%2FCenter%2Fcrop%2F%21690x370%2Fquality%2F100"
            },{
                id:"03",
                imgUrl:"http://b1-q.mafengwo.net/s13/M00/82/4B/wKgEaVzdlTKAZ9-XABYQsNIKQXs59.jpeg?imageMogr2%2Fthumbnail%2F%21305x183r%2Fgravity%2FCenter%2Fcrop%2F%21305x183%2Fquality%2F100"
            },{
                id:"04",
                imgUrl:"http://p1-q.mafengwo.net/s10/M00/31/44/wKgBZ1lUkoGAWTyAAAtxLp7m5II70.jpeg?imageMogr2%2Fthumbnail%2F%21305x183r%2Fgravity%2FCenter%2Fcrop%2F%21305x183%2Fquality%2F100"
            },{
                id:"05",
                imgUrl:"https://t11.baidu.com/it/u=1462106782,1314671847&fm=175&app=25&f=JPEG?w=640&h=457&s=10A2CBB01A2A028C8E12E4D90300409B"
            }]
        }
    },
    methods:{
        showswiper(){
        this.imgSwiper = true
        },
        hideSwiper(){
        this.imgSwiper =false
        }
    }
}
</script>

<style scoped>
    .banner{
        position: relative;
        width: 100%;
    }
    .banner .banner-img{
        width: 100%;
    }
    .banner .banner-img img{
        width: 100%;
        
    }
    .banner-title{
        position: absolute;
        left: 20px;
        bottom: 14px;
        color: #Ffff;
        font-size: 14px;
    }
    .img-swiper{
        background-color: #000;
        width: 100%;
        height: 100%;
        position: fixed;
        top:0;
        left: 0;
        display: flex;
        align-items: center;
    }
    .img-swiper img{
        width: 100%;
        height: 200px;
    }
    .swiper-pagination-fraction{
        bottom: 40px!important;
        font-size: 16px !important;
        color: white!important;
    }
</style>